<template>
	<div class="app-container">
		<div class="search-container">
			<el-form ref="form" :model="queryParams" :inline="true">
				<el-form-item prop="number" label="样本编号">
					<el-input v-model="queryParams.number" placeholder="样本编号" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item prop="status" label="样本状态">
          <el-select v-model="queryParams.status" placeholder="样本状态" @change="updateStatus">
            <el-option label="样本已收到" value="SAMPLE_RECEIVE"></el-option>
            <el-option label="实验室测序完成" value="REPORT_SEQ_END"></el-option>
            <el-option label="数据分析中" value="DATA_ANALYSIS"></el-option>
            <el-option label="样本审核中" value="REPORT_AUDIT"></el-option>
            <el-option label="完成" value="COMPLETED"></el-option>
          </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
					<el-button @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-card shadow="never">
			<el-table
				v-loading="loading"
				:data="dataList"
				highlight-current-row
				border
				:cell-style="cellStyle"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" align="center"/>
				<el-table-column label="序号" width="55" prop="dataIndex"/>
				<el-table-column label="样本编号" prop="number"/>
        <el-table-column label="绑定用户" prop="userName"/>
				<el-table-column label="样本状态" prop="statusText"/>
				<el-table-column label="创建时间" prop="createTime"/>
				<el-table-column label="更新时间" prop="updateTime"/>
			</el-table>

			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="queryParams.pageNum"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="10"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</el-card>

	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import userApi from '@/api/system/user';
import { formatDate } from '@/utils/formatTime';
import seqSampleApi from '@/api/sequence/seqSample'
export default {
	name: 'signSampleIndex',
	data() {
		return {
			queryParams: {
        pageNum: 0,
        pageSize: 10,
        number: '',
        status: '',
        criteriaVos: [{
          name: 'sampleType',
          searchType: 'EQUAL',
          searchVal: 'REPORT'
        }],
      },
			total: 0,
			loading: false,
			dataList: [],
			ids: [],
			userList: [],
			dialog: {},
			formData: {},
			rules: {},

			detailDialog: {},
			checkedSample: {},
			sampleImgUrl: '',

			statusMap: {
				CREATE: '已创建',
				TO_BE_SENT_OUT: '待寄出',
				SENT_OUT: '已寄出',
				SAMPLE_RECEIVE: '样本已收到',
				REPORT_SEQ_END: '实验室测序完成',
				DATA_ANALYSIS: '数据分析中',
				REPORT_AUDIT: '样本审核中',
				COMPLETED: '完成',
			},

			viewFileVisible: false,
			headers: {},
		};
	},
	mounted() {
		this.headers = {
			Authorization: 'Bearer ' + localStorage.getItem('token'),
		};
	},
	methods: {
    updateStatus () {
      this.handleQuery();
    },
		handleQuery() {
			this.loading = true;
      let searchFormData = [{
        name: 'sampleType',
        searchType: 'EQUAL',
        searchVal: 'REPORT'
      }, {
        name: 'number',
        searchType: 'LIKE',
        searchVal: this.queryParams.number
      }];
      if (this.queryParams.status != '') {
        searchFormData.push({
          name: 'sampleStatus',
          searchType: 'EQUAL',
          searchVal: this.queryParams.status
        })
      }
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        criteriaVos: searchFormData,
      };
      seqSampleApi.page(params).then((res) => {
        let data = res.data;
        let that = this;
        let index = 1
        data.content.forEach((v) => {
          v.dataIndex = index++;
          v.statusText = this.statusMap[v.sampleStatus]
        });
        this.dataList = data.content;
        
        this.total = data.count;
        this.loading = false;
      }).catch(() => {});
		},
		resetQuery() {
			this.queryParams = {
        pageNum: 0,
        pageSize: 10,
        number: '',
        status: '',
        criteriaVos: [{
          name: 'sampleType',
          searchType: 'EQUAL',
          searchVal: 'REPORT'
        }],
      };
      this.handleQuery();
		},
		handleDelete(id) {
			if (id) {
				seqSampleApi.delete(id).then((res) => {
					this.$message({ message: '样本删除成功！', type: 'success' });
					this.handleQuery();
				});
			} else {
				this.$message.error('暂不支持批量删除样本！');
			}
		},
		cellStyle({ row, column, rowIndex, columnIndex }) {
			if (column.property == 'number') {
				return {
					cursor: 'pointer',
				};
			}
		},
		handleSelectionChange(val) {
			this.ids = [];
			val.forEach((v) => {
				this.ids.push(v.id);
			});
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.handleQuery();
		},
		handleCurrentChange(val) {
			this.queryParams.pageNum = val;
			this.handleQuery();
		},
	},
	created() {
		this.handleQuery();
	},
};
</script>

<style scoped>
.block {
	margin-top: 10px;
	float: right;
	margin-bottom: 10px;
}

.viewFileVisible_box {
	display: flex;
}

.input_file {
	width: 50%;
	border: 1px solid #dcdfe6;
	padding: 2% 1%;
	margin-right: 2%;
}

.input_file h3 {
	/* margin-bottom: 2%; */
}

.output_file {
	width: 50%;
	border: 1px solid #dcdfe6;
	padding: 2%;
}

.output_file h3 {
	/* margin-bottom: 2%; */
}

.input_file_top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2%;
}
</style>